<template>
  <div>
    <GenericTable :data="tableData" :columns="columns">
      <template #actions="scope">
        <el-button type="primary" @click="handleAssign(scope.row)"
          >授权</el-button
        >
      </template>
    </GenericTable>
    <!-- 弹窗 -->
    <GenericDialogForm
      :dialogTitle="'分配权限'"
      :dialogWidth="'30%'"
      v-model:visible="dialogVisible"
      :formData="formData"
      :formFields="formFields"
      :formRules="formRules"
      @confirm="handleConfirm"
    >
      <template #menu="scope">
        <el-tree
          :data="transformedData"
          :props="scope.row.treeProps"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="selectedMenuIds"
          @check-change="handleCheckChange"
        />
      </template>
    </GenericDialogForm>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import GenericDialogForm from "@/component/GenericDialogForm.vue";
import GenericTable from "@/component/GenericTable.vue";
import { getAllRolesAPI, getRoleAPI } from "@/service/login/role";
import cache from "@/utils/cache";
import { formatTreeData } from "@/utils";

const dialogVisible = ref(false);
const formData: any = reactive({});
const formFields = [
  {
    label: "菜单",
    prop: "menu",
    type: "tree-select",
    options: [],
    multiple: true,
    treeProps: { children: "children", label: "name" },
  },
];
const transformedData = ref([
  {
    value: "1",
    label: "首页",
    children: [],
  },
  {
    value: "2",
    label: "用户管理",
    children: [
      {
        value: "6",
        label: "新增用户",
        children: [],
      },
      {
        value: "7",
        label: "编辑用户",
        children: [],
      },
    ],
  },
  {
    value: "3",
    label: "角色管理",
    children: [
      {
        value: "8",
        label: "新增角色",
        children: [],
      },
      {
        value: "9",
        label: "分配权限",
        children: [],
      },
    ],
  },
  {
    value: "4",
    label: "文章管理",
    children: [],
  },
  {
    value: "5",
    label: "个人信息",
    children: [],
  },
]);
const formRules = reactive({});
const columns = ref([
  { prop: "id", label: "ID", width: 180 },
  { prop: "name", label: "角色名" },
]);
const tableData = ref([]);
const selectedMenuIds = ref<string[]>([]);

onMounted(async () => {
  const token = cache.getCache("token");
  const res = await getAllRolesAPI(token);
  if (res.statusCode === 200) {
    tableData.value = res.data;
  }
});

const handleAssign = async (row: any) => {
  formFields[0].options = transformedData.value as never[];
  const token = cache.getCache("token");
  const res = await getRoleAPI(token, row.id);
  if (res.statusCode === 200) {
    selectedMenuIds.value = formatTreeData(res.data.menus).map(
      (item: any) => item.value
    ) as never[];
    console.log(selectedMenuIds.value, "selectedMenuIds.value");
    dialogVisible.value = true;
  }
};

const handleCheckChange = (data: any, checked: boolean) => {};

const handleConfirm = () => {
  dialogVisible.value = false;
};
</script>
